<template>
  <!-- 导航栏 -->
  <navbar class="home-nav">
    <template v-slot:center>
      <div style="font-size: 0.6rem;">购物街</div>
    </template>
  </navbar>

  <!-- 轮番图 -->
  <van-swipe  :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="(item, index) in data.banners" :key="index">
    <img :src="item.image" style="width: 10rem;height: 4.6667rem;" alt="">
  </van-swipe-item>
</van-swipe>

  <!-- 推荐图 -->
  <div class="recommend">
    <div v-for="item in data.recommends" class="recommend-item">
      <a :href="item.link">
        <img :src="item.image" alt="">
        <div>{{ item.title }}</div>
      </a>
    </div>
  </div>

  <!-- 静态图 -->
  <div class="feature">
    <a href="https://act.mogujie.com/zzlx67">
      <img src="../../assets/image/home/recommend_bg.jpg" alt="">
    </a>
  </div>

  <!-- 标题 -->
  <div class="tab-control">
    <div v-for="(item, index) in data.titles" :key="index"
      :class="[data.zindex == index ? 'active' : '', 'tab-control-item']" @click="itemClick(index)">
      <span>{{ item }}</span>
    </div>
  </div>

  <!-- 商品详情 -->
  <goodslist :goodslist="showGoods"/>

  <div style="height:200px;"></div>
</template>

<script setup>
import navbar from '../../components/navbar.vue'
import goodslist from '../../components/goodslist.vue'
import { reactive,computed} from 'vue'
import { getHomeMultidata, getHomeGoods } from "../../network/home"

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper-bundle.css'


let data = reactive({
  banners: [],
  recommends: [],
  titles: ['流行', '新款', '精选'],
  zindex: 0,
  goods: {
    'pop': { page: 1, list: [] },
    'new': { page: 1, list: [] },
    'sell': { page: 1, list: [] },
  },
  currentType: 'pop',

})
let itemClick = (index) => {
  data.zindex = index
  if(index==0)
  {
    data.currentType='pop'
  }
  if(index==1)
  {
    data.currentType='new'
  }
  if(index==2)
  {
    data.currentType='sell'
  }
}
// 请求网络-轮番以及推荐
getHomeMultidata().then(res => {
  console.log('getHomeMultidata', res)
  data.banners = res.data.banner.list;
  data.recommends = res.data.recommend.list;
})

// 请求home数据
let getgoods=(type,page)=>{
  getHomeGoods(type,page).then((res)=>{
    console.log('getHomeGoods', res)
   data.goods[type].list.push(...res.data.list)
})
}

getgoods('pop',data.goods['pop'].page)
getgoods('new',data.goods['new'].page)
getgoods('sell',data.goods['sell'].page)

let showGoods=computed(()=>{
  return data.goods[data.currentType].list
})






</script>

<style scoped>
#home {
  /*padding-top: 44px;*/
  height: 100vh;
  position: relative;
}

.home-nav {
  background-color: var(--color-tint);
  color: #fff;
}

.content {
  overflow: hidden;

  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}

.tab-control {
  position: relative;
  z-index: 9;
}

.recommend {
  display: flex;
  width: 100%;
  text-align: center;
  font-size: 12px;

  padding: 10px 0 20px;
  border-bottom: 10px solid #eee;
}

.recommend-item {
  flex: 1;
}

.recommend-item img {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
}

.feature img {
  width: 100%;
}

.tab-control {
  display: flex;
  text-align: center;
  font-size: 17px;
  height: 40px;
  line-height: 40px;
  color: black;
  background-color: #fff;
}

.tab-control-item {
  flex: 1;
}

.tab-control-item span {
  padding: 5px;
}

.active {
  color: red;
}

.active span {
  border-bottom: 1px solid #dd001b;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>